import React, { useState, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { Modal, Grid, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';

import MainCard from 'components/ui-component/cards/MainCard';
import SelectModule from 'components/ui-component/extended/Workflow/SelectModule';
import SubCard from '../cards/SubCard';

function getModalStyle() {
  return {
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)'
  };
}

export default function ModuleModal({ children, open, onClose }) {
  const [modalStyle] = useState(getModalStyle);

  return (
    <Grid container justifyContent="flex-end">
      <Modal open={open} onClose={onClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description">
        <Body modalStyle={modalStyle} handleClose={onClose}>
          {children}
        </Body>
      </Modal>
    </Grid>
  );
}

const Body = forwardRef(({ modalStyle, handleClose, children }, ref) => (
  <div ref={ref} tabIndex={-1}>
    <MainCard
      style={modalStyle}
      sx={{
        position: 'absolute',
        width: { xs: 500, lg: 800 }
      }}
      title="请选择模块"
      content={false}
      secondary={
        <IconButton onClick={handleClose} size="large">
          <CloseIcon fontSize="small" />
        </IconButton>
      }
    >
      {children}
    </MainCard>
  </div>
));

Body.propTypes = {
  modalStyle: PropTypes.object.isRequired,
  handleClose: PropTypes.func.isRequired
};
